import React,{Component} from "react";
import {Text, View,StyleSheet,Dimensions} from 'react-native';
//获取设备的宽高
const width=Dimensions.get('window').width;
const height = Dimensions.get("window").height;


//创建组件
class App extends Component{
  //渲染函数
  render() {
    return (
      <View style={styles.box}>
        <View style={styles.content}>
          <Text style={[styles.text1,{backgroundColor:'#c0392b',borderTopLeftRadius:10}]}>酒店</Text>
          <Text style={[styles.text2,{backgroundColor:'#e74c3c'}]}>名宿.客栈</Text>
          <Text style={[styles.text4,{backgroundColor:'#f1c40f',borderTopRightRadius:10}]}>特价.爆款</Text>
        </View>
        <View style={styles.content}>
          <Text style={[styles.text1,{backgroundColor:'#2980b9'}]}>机票</Text>
          <Text style={[styles.text2,{backgroundColor:'#2980b9'}]}>火车票</Text>
          <Text style={[styles.text3,{backgroundColor:'#3498db'}]}>汽车.船票</Text>
          <Text style={[styles.text3,{backgroundColor:'#3498db'}]}>专车.租车</Text>

        </View>
        <View style={styles.content}>
          <Text style={[styles.text1,{backgroundColor:'#16a085',borderBottomLeftRadius:10}]}>旅游</Text>
          <Text style={[styles.text2,{backgroundColor:'#1abc9c'}]}>私家团</Text>
          <Text style={[styles.text3,{backgroundColor:'#27ae60'}]}>邮轮游</Text>
          <Text style={[styles.text3,{backgroundColor:'#2ecc71',borderBottomRightRadius:10}]}>定制游</Text>
        </View>
      </View>
    );
  }
}

const styles=StyleSheet.create({
  box:{
    display:'flex',
    flex:1,
    justifyContent:'center',
    alignItems:'center',
  },
  content:{
    width:width*0.9,
    height:100,
    display:'flex',
    flexDirection:'row',
  },
  text1:{
    flex:1,
    borderWidth:1,
    color:'#fff',
    borderColor:'#fff',
    textAlign:'center',
    lineHeight:100
  },
  text2:{
    flex:1,
    color:'#fff',
    borderWidth:1,
    borderColor:'#fff',
    textAlign:'center',
    lineHeight:100
  },
  text3:{
    flex:1,
    color:'#fff',
    borderWidth:1,
    borderColor:'#fff',
    textAlign:'center',
    lineHeight:100
  },
  text4:{
    flex:2,
    color:'#fff',
    borderWidth:1,
    borderColor:'#fff',
    textAlign:'center',
    lineHeight:100
  }

})
export default App;
